<template>
	<view>
		<u-dropdown ref="dropdown">
			<u-dropdown-item v-model="params.service_type" :title="typeText" :options="options_type"
				@change="handlerType">
				<scroll-view @touchmove.stop.prevent="() => {}" scroll-y="true" style="height: 600rpx;">
					<view class="job-dropdown-box">
						<view class="job-dropdown-item" v-for="(item,index) in options_type"
							@click="handleJobDropdownClick(item)">
							<view :class="params.service_type == item.value ? 'ac-text text' : 'text'">
								{{item.label}}
							</view>
							<view v-show="params.service_type == item.value" class="icon">
								<u-icon name="checkbox-mark" size="32"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
			</u-dropdown-item>
			<u-dropdown-item v-model="params.status" :title="statusText" :options="options_status"
				@change="handlerStatus" />
		</u-dropdown>
		<view class="form_split_10"></view>
		<u-empty text="没有找到对应的数据" v-if="show_empty === true" />
		<view>
			<view class="box_1">
				<scroll-view scroll-y="true" style="height: calc(100vh - 90rpx);" @scrolltolower="scrolltolower">
					<view v-for="(item, index) in dataset" :key="index">
						<view class="item" @click="handlerDetail(item)">
							<view class="tx1">
								<view class="content">
									<view class="orderId">
										订单号：{{ item.oid }}
									</view>
									<view class="right_txt" v-if="item.status == 0">
										<text class="not_pay">待付款</text>
									</view>
									<view class="right_txt" v-if="item.status == 1">
										<text class="over">已完成</text>
									</view>
									<view class="right_txt" v-if="item.status == 2">
										<text class="cancel">已取消</text>
									</view>
								</view>
							</view>
							<view class="tx2" :class="$store.state.LoginType == 2 ? ' personal' : ''">
								<view class="content">
									<!-- {{item.service_type + ($store.state.LoginType == 2 ? ' personal' : '') }} -->
									<view class="order_ico"
										:class=" item.service_type + ($store.state.LoginType == 2 ? ' personal' : '') ">
									</view>
									<view class="name" v-if="$store.state.LoginType == 1">
										{{ item.service_type_text }}
									</view>
									<view class="name" v-else>
										{{ item.service_name }}
									</view>
									<view class="des" v-if="$store.state.LoginType == 1">
										{{ item.service_name }}
									</view>
									<view class="des" v-else>专享简历推荐特权</view>
								</view>
							</view>
							<view class="tx3">
								<view class="content">
									实付金额：
									<text class="num_ico">￥</text>
									<text class="num">{{ item.amount }}</text>
								</view>
							</view>
							<u-button v-if="item.status == 0" class="self_btn now_pay" size="mini" plain type="primary"
								shape="circle" @click.stop="handlerRepay(item)">
								立即支付
							</u-button>
							<u-button v-if="item.status == 0" :custom-style="{color:'#999999'}" size="mini"
								class="self_btn cancel_pay" plain shape="circle" @click.stop="openCancelOrderTip(item)">
								取消订单
							</u-button>
							<u-button v-if="item.status == 2" :custom-style="{color:'#999999'}" size="mini"
								class="self_btn del_pay" plain shape="circle" @click.stop="handlerDel(item)">
								删除订单
							</u-button>
							<u-button v-if="item.status == 1" @click="handlerDetail(item)"
								:custom-style="{color:'#999999'}" size="mini" class="self_btn detail_pay" plain
								shape="circle">
								查看详情
							</u-button>
						</view>
						<view class="form_split_10"></view>
					</view>
					<u-loadmore class="u-loadmore" v-if="dataset.length >= params.pagesize" :status="finished_status" />
				</scroll-view>
			</view>
		</view>
		<u-popup v-model="showPayment" closeable mode="bottom">
			<PopupPayment :amount="order_amount" @handlerSubmit="handlerSubmit"></PopupPayment>
		</u-popup>
		<CustomerModal ref="CustomerModal"></CustomerModal>
		<PaySubmit ref="paySubmit" :payment="payment" @handlePaySuccess="handlePaySuccess"
			@handlePayFail="handlePayFail" success-url="/member/order/list"></PaySubmit>
		<u-modal v-model="cancelTipShow" title="系统提示" content="确定取消该订单吗？" :show-cancel-button="true"
			@confirm="handlerCancel"></u-modal>
		<!-- 是否删除订单模态框 -->
		<u-modal v-model="delOrderModal" title="系统提示" content="确定删除该订单吗？" show-cancel-button @confirm="handleDelOrder">
		</u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import PaySubmit from '@/components/service/PaySubmit'
	import PopupPayment from '@/components/service/PopupPayment'
	import http from '@/utils/http'
	import api from '@/api'
	import {
		mapState
	} from 'vuex'
	import CustomerModal from "@/components/CustomerModal.vue"
	export default {
		name: 'OrderList',
		// props: ['utype'],
		components: {
			PaySubmit,
			PopupPayment,
			CustomerModal
		},
		data() {
			return {
				delOrderModal: false,
				delOrderObj: {},
				typeText: "全部类型",
				statusText: "全部状态",
				finished_status: 'loadmore', // 上拉加载
				cancelTipShow: false,
				CancelOrderData: {},
				showPayment: false,
				order_id: 0,
				order_amount: 0,
				payment: 'wxpay',
				dataset: [],
				show_empty: false,
				params: {
					service_type: '',
					status: '',
					page: 1,
					pagesize: 15
				},
				options_type: [{
					label: '全部类型',
					value: ''
				}],
				options_status: [{
					label: '全部状态',
					value: ''
				}]
			}
		},
		computed: {
			...mapState({
				utype: state => state.LoginType
			})
		},
		watch: {
			$Route(to, from) {
				// 对路由变化作出响应...
				if (this.utype == 1) {
					if (from.name != 'CompanyOrderDetail' && to.name == 'CompanyOrderList') {
						this.fetchData(true)
					}
				} else {
					if (from.name != 'PersonalOrderDetail' && to.name == 'PersonalOrderList') {
						this.fetchData(true)
					}
				}
			}
		},
		beforeRouteLeave(to, from, next) {
			if (to.name == 'CompanyOrderDetail' || to.name == 'PersonalOrderDetail') {
				if (!from.meta.keepAlive) {
					from.meta.keepAlive = true
				}
				next()
			} else {
				from.meta.keepAlive = false
				next()
			}
		},
		mounted() {
			this.fetchData(true)
		},
		methods: {
			handlePaySuccess() {
				this.fetchData(true)
			},
			handlePayFail() {
				uni.showToast({
					title: '支付失败',
					icon: 'none'
				});
			},
			handleJobDropdownClick(item) {
				this.$refs.dropdown.close();
				this.params.service_type = item.value
				this.typeText = item.label
				this.params.page = 1
				this.fetchData(true)
			},
			/**
			 * 初始化数据
			 * @init (Boolaen) 确认是初始化还是上拉加载
			 * */
			fetchData(init) {
				this.show_empty = false
				if (init === true) {
					this.params.page = 1
				} else {
					this.finished_status = 'loading'
				}
				let url = this.utype == 1 ? api.company_orderlist : api.personal_orderlist
				var params = JSON.parse(JSON.stringify(this.params))
				if (params.status) {
					params.status = this.params.status - 1
				}
				http
					.get(url, params)
					.then(res => {
						if (init === true) {
							this.dataset = [...res.data.data.items]
							this.options_type = [{
								label: '全部类型',
								value: ''
							}]
							res.data.data.filter_type.forEach(element => {
								this.options_type.push({
									value: element.value,
									label: element.label
								})
							})
							this.options_status = [{
								label: '全部状态',
								value: ''
							}]
							res.data.data.filter_status.forEach(element => {
								if (element.value >= 0) {
									this.options_status.push({
										value: element.value + 1,
										label: element.label
									})
								} else {
									this.options_status.push({
										value: element.value,
										label: element.label
									})
								}
							})
						} else {
							this.dataset = this.dataset.concat(res.data.data.items)
						}

						// 数据全部加载完成
						if (res.data.data.items.length < this.params.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length == 0) {
								this.show_empty = true
							}
						}
					})
					.catch(() => {})
			},
			/**
			 * 下拉筛选 (全部类型)
			 * */
			handlerType(type) {
				let typeText = this.options_type.filter(res => {
					return res.value == type
				})
				this.typeText = typeText.length > 0 ? typeText[0].label : '全部类型'
				this.fetchData(true)
			},
			/**
			 * 下拉筛选（全部状态）
			 * */
			handlerStatus(status) {
				this.params.status = status
				let statusText = this.options_status.filter((res) => {
					return parseInt(res.value) === parseInt(status)
				})
				this.statusText = statusText.length > 0 ? statusText[0].label : '全部状态'
				this.fetchData(true)
			},
			/**
			 * 查看详情
			 * @item (Object) 当前点击项数据
			 * */
			handlerDetail(item) {
				uni.navigateTo({
					url: '/commonViews/service/OrderDetail?id=' + item.id
				})
			},
			/**
			 * 立即支付弹窗开启
			 * */
			handlerRepay(item) {
				// #ifdef MP-TOUTIAO
				this.$nextTick(() => {
					this.$refs.CustomerModal.getCustomer()
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.order_id = item.id
				this.order_amount = item.amount
				this.showPayment = true
				// #endif
			},
			/**
			 * 支付弹窗回调函数
			 * */
			handlerSubmit(payment) {
				this.payment = payment
				let url =
					this.$store.state.LoginType == 1 ?
					api.company_repay :
					api.personal_repay
				this.$refs.paySubmit.handlerSubmit(url, {
					id: this.order_id,
					payment: this.payment
				}, function() {
					this.fetchData(true)
				})
			},
			/////
			payFinish() {
				this.fetchData(true)
			},
			/**
			 * 取消订单弹框开启
			 * */
			openCancelOrderTip(item) {
				this.CancelOrderData = item
				this.cancelTipShow = true
			},
			/**
			 * 取消订单弹窗确认
			 * */
			handlerCancel() {
				let url = this.utype == 1 ? api.company_order_cancel : api.personal_order_cancel
				http
					.post(url, {
						id: this.CancelOrderData.id
					})
					.then(res => {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success'
						})
						this.fetchData(true)
					})
					.catch(() => {})
			},
			/**
			 * 删除订单弹窗开启
			 * */
			handlerDel(item) {
				this.delOrderObj = item
				this.delOrderModal = true
			},
			/**
			 * 确认删除订单
			 * */
			handleDelOrder() {
				let url = this.utype == 1 ? api.company_order_del : api.personal_order_del
				http
					.post(url, {
						id: this.delOrderObj.id
					})
					.then(res => {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success',
						})
						this.fetchData(true)
					})
					.catch(() => {})
			},
			/**
			 * 上拉加载
			 * */
			scrolltolower() {
				this.finished_status = 'loading';
				this.params.page++
				this.fetchData(false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.job-dropdown-box {
		background: #fff;

		.job-dropdown-item {
			padding: 26rpx 32rpx;
			line-height: 44rpx;
			position: relative;
			display: flex;

			&::after {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				pointer-events: none;
				box-sizing: border-box;
				transform-origin: 0 0;
				width: 199.8%;
				height: 199.7%;
				transform: scale(.5);
				border: 0 solid #e4e7ed;
				z-index: 2;
				border-bottom-width: 2rpx;
			}
		}

		.text {
			width: auto;

			&.ac-text {
				color: rgb(41, 121, 255);
			}
		}

		.icon {
			flex: 1;
			overflow: hidden;
			text-align: right;
			vertical-align: middle;
			color: #909399;
			font-size: 20rpx;
			color: rgb(41, 121, 255);
		}
	}

	.box_1 {
		.item {
			.content {
				padding: 0 30rpx;

				.orderId {
					width: 600rpx;
				}
			}

			.cancel_pay {
				position: absolute;
				right: 190rpx;
				bottom: 30rpx;
			}

			/deep/ .now_pay,
			/deep/ .detail_pay,
			/deep/ .del_pay {
				position: absolute;
				right: 20rpx;
				bottom: 30rpx;
			}

			/deep/ .self_btn {
				padding-left: 26rx;
				padding-right: 26rx;
			}

			.tx3 {
				.num {
					font-size: 30rpx;
					color: #ff6600;
				}

				.num_ico {
					font-size: 18rpx;
					color: #ff6600;
				}

				font-size: 24rpx;
				color: #666666;
				padding-bottom: 40rpx;
			}

			.tx2 {
				&.personal {
					padding-left: 190rpx;
				}

				.order_ico {
					&.personal {
						width: 160rpx;
						border-radius: 14rpx;
					}

					&.stick {
						background-image: url($ImgUrl + "order_ico_top.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 160rpx 100rpx;
					}

					&.tag {
						background-image: url($ImgUrl + "order_ico_tag.png");
						background-position: 0;
						background-repeat: no-repeat;
						background-size: 160rpx 100rpx;
					}

					&.points {
						background-image: url($ImgUrl + "company_order_ico_jfcz.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.jlkjxz {
						background-image: url($ImgUrl + "company_order_ico_jlkjxz.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.setmeal {
						background-image: url($ImgUrl + "company_order_ico_tcsj.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.emergency {
						background-image: url($ImgUrl + "company_order_ico_zwjj.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.jobstick {
						background-image: url($ImgUrl + "company_order_ico_zwzd.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.refresh_job_package {
						background-image: url($ImgUrl + "company_order_ico_zwznsx.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.resume_package {
						background-image: url($ImgUrl + "company_order_ico_jlzzb.png");
						background-position: 0;
						background-repeat: no-repeat;
						background-size: 100rpx;
					}

					position: absolute;
					left: 30rpx;
					top: 20rpx;
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
				}

				.des {
					padding: 0 20rpx 40rpx 0;
					font-size: 26rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.name {
					padding: 24rpx 20rpx 10rpx 0;
					font-size: 30rpx;
					color: #666666;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				position: relative;
				padding-left: 130rpx;
			}

			.tx1 {
				.right_txt {
					.over {
						color: #009900;
					}

					.cancel {
						color: #999999;
					}

					.time {
						color: #fe4737;
						font-size: 28rpx;
					}

					.not_pay {
						color: #ff5d24;
					}

					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 24rpx;
				}

				position: relative;
				width: 100%;
				border-bottom: 2rpx solid #f3f3f3;
				font-size: 24rpx;
				color: #999999;
				padding: 24rpx 260rpx 24rpx 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			width: 100%;
			background-color: #ffffff;
			border-radius: 10rpx;
			position: relative;
		}

		width: 100%;
	}
</style>